<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <title th:text="${title}">页面名称</title>
    <link href="../static/layui/layui.css" th:href="@{/layui/layui.css}" rel="stylesheet">
    <script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <link href="../static/css/myui.css" th:href="@{/css/myui.css}" rel="stylesheet">
    <script src="../static/jquery/jquery-3.7.1.min.js" th:src="@{/jquery/jquery-3.7.1.min.js}"></script>
</head>
<body>
<!--导航栏-->
<div style="background: rgb(47,54,60); opacity: 90%; position: sticky;top: 0; z-index: 99;text-align: center" th:fragment="navigate(user, index)">
    <div class="layui-container layui-font-14" style="display:flex;position: relative">
        <div class="myui-logo-container">
            <img style="width: 80%;height: 80%;border-radius: 5px" th:src="@{/avatars/icon/logo.png}"  src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
        </div>
        <ul class="layui-nav" style="margin-left: 0">
            <li class="layui-nav-item" th:classappend="${index == 1 ? 'myui-title-active': ''}">
                <a th:href="@{'/index'}" class="layui-font-18" style="">话题</a>
            </li>
            <li class="layui-nav-item" th:classappend="${index == 2 ? 'myui-title-active': ''}">
                <a th:href="@{'/index/article'}" href="" class="layui-font-18">文章</a>
            </li>
            <li class="layui-nav-item">
                <a href="https://gitee.com/derekerrr/kkblog.git" target="_blank" class="layui-font-18">Gitee</a>
            </li>
            <li class="layui-nav-item">
                <a href="https://gitee.com/derekerrr/kkblog.git" target="_blank" class="layui-font-18">Github</a>
            </li>
        </ul>
        <div style="width: 30%;margin: auto auto auto 0;">
            <div class="layui-input-group" style="width: 100%">
                <input type="hidden" id="search-type">
                <input type="text" placeholder="搜索..." class="layui-input" id="search-key">
                <div class="layui-input-split layui-input-suffix" id="search-btn" style="cursor: pointer;">
                    <i class="layui-icon layui-icon-search"></i>
                </div>
            </div>
        </div>
        <div style="position: absolute;right: 50px;margin-top: 10px">
            <div style="display: flex">
                <a class="layui-btn" style="margin-right: 20px" th:href="@{'/login'}" th:if="${user == null}">
                    登录</a>
                <button class="layui-btn" id="post-button" style="margin-right: 20px" th:if="${user != null}">
                    <i class="layui-icon layui-icon-add-1"></i>
                    发表</button>
                <a href="javascript:;" class="myui-font-color-gray" id="user-info" th:if="${user != null}">
                    <img th:src="@{${user.avatar}}" style="border-radius: 50%;width: 35px;height: 35px ">
                    <span class="layui-font-14" style="color: whitesmoke">[[${user.nickname}]]</span>
                    <i class="layui-icon layui-icon-down" style="color: whitesmoke"></i>
                </a>
            </div>
        </div>
    </div>
    <script>
        layui.use('dropdown', function(){
            var dropdown = layui.dropdown
            dropdown.render({
                elem: '#post-button' //可绑定在任意元素中，此处以上述按钮为例
                ,data: [{
                    title: '发动态'
                    ,id: 100
                    ,href: '/dynamic/create'
                },{
                    title: '发话题'
                    ,id: 101
                    ,href: '/dynamic/create-topic' //开启超链接
                }, {
                    title: '发文章'
                    ,id: 101
                    ,href: '/article/create' //开启超链接
                }]
                ,id: 'demo1'
                //菜单被点击的事件
                ,click: function(obj){
                    // console.log(obj);
                    // layer.msg('回调返回的参数已显示再控制台');
                }
            });
        });

        layui.use('dropdown', function(){
            var dropdown = layui.dropdown
            dropdown.render({
                elem: '#user-info', //可绑定在任意元素中，此处以上述按钮为例
                trigger: 'hover',
                data: [{
                    title: '个人主页',
                    href: '/user/me'
                    ,id: 100
                },{
                    title: '我的收藏'
                    ,id: 101
                    ,href: '/user/stars' //开启超链接
                }, {
                    title: '编辑资料'
                    ,id: 101
                    ,href: '/profile/me' //开启超链接
                }, {
                    title: '退出登录'
                    ,id: 101
                    ,href: '/login/logout' //开启超链接
                }]
                ,id: 'demo1'
                //菜单被点击的事件
                ,click: function(obj){
                    // console.log(obj);
                    // layer.msg('回调返回的参数已显示再控制台');
                }
            });
        });

        String.prototype.myTrim = function() {
            return this.replace(/^\s+|\s+$/g, '');
        };

        $(document).ready(function () {
            $('#search-btn').on('click', function () {
                let key = $('#search-key').val().myTrim();
                if (key === '') return;
                let searchType = $('#search-type').val();
                if (searchType !== '') {
                    window.location.href = "/index/search?key=" + key + '&type=' + searchType;
                } else {
                    window.location.href = "/index/search?key=" + key;
                }
            })
        })
    </script>
</div>

<!--话题列表-->
<ul class="layui-menu" th:fragment="topic(topics)">
    <li th:each="topic : ${topics}">
        <div class="myui-menu-body-title" th:classappend="${topic.selected ? 'myui-active' : ''}" th:onclick="|topic('${topic.id}')|">
            <img class="myui-top-image" th:src="@{${topic.icon}}">
            <span class="myui-topic-name">[[${topic.name}]]</span>
        </div>
    </li>
    <script>
        function topic(id) {
            window.location.href = "/index/topics/" + id;
        }
    </script>
</ul>

<!--动态预览列表-->
<th:block th:fragment="preDynamics(dynamics)">
    <div class="layui-card myui-card" th:each="dynamic : ${dynamics}">
<!--        <div class="myui-avatar-container">-->
<!--            <img th:src="@{${dynamic.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="myui-avatar-middle">-->
<!--        </div>-->
        <div class="layui-card-body" style="width: 100%">
            <div class="myui-card-header">
                <span class="myui-nickname" th:text="${dynamic.nickname}">民数</span>
<!--                <span class="myui-top-tip" th:if="${dynamic.stick == 1}">置顶</span>-->
                <span class="myui-time-tip" th:text="${'发布于 ' + #dates.format(dynamic.createTime, 'yyyy-MM-dd HH:mm:ss')}">发布于2024-23-12 12:12:21</span>
            </div>
            <a class="myui-card-titler" target="_blank" href="http://localhost:8080" th:if="${dynamic.type == 1}" th:text="${dynamic.title}" th:onclick="|window.open('/dynamic/${dynamic.id}', '_blank')|">
                Go 语言社区系统 BBS-GO 4.0.0 发布，升级vue3、nuxt3
            </a>
            <div class="myui-card-content" th:text="${dynamic.preView}" th:onclick="|window.open('/dynamic/${dynamic.id}', '_blank')|">
                卡片式面板面板通常用于非白色背景色的主体内
            </div>
            <ul class="myui-image-ul layui-row" th:onclick="|window.open('/dynamic/${dynamic.id}', '_blank')|">
                <li class="myui-image-li" th:each="image : ${#thJson.parseStringArray(dynamic.imageList)}">
                    <img class="myui-list-image" th:src="${image}" src="https://picsum.photos/400">
                </li>
            </ul>
            <div class="myui-card-footer">
                <div class="myui-gap" th:classappend="${dynamic.liked ? 'active' : ''}" th:id="${'like-gap-' + dynamic.id}" th:onclick="|doLikeOrUnlike(${dynamic.id})|">
                    <i class="layui-icon layui-icon-star-fill myui-like-icon"></i>&nbsp;点赞&nbsp;<span th:text="${dynamic.likeNumber}" th:id="${'like-number-' + dynamic.id}">2121</span>
                </div>
                <div  class="myui-gap">
                    <i class="layui-icon layui-icon-reply-fill"></i>&nbsp;评论&nbsp;<span th:text="${dynamic.commentNumber}">2121</span>
                </div>
                <div  class="myui-gap">
                    <i class="layui-icon layui-icon-read"></i>&nbsp;浏览&nbsp;<span th:text="${dynamic.viewNumber}">2121</span>
                </div>
                <div class="myui-topic-tip" th:text="${dynamic.topicName}">开源</div>
            </div>
        </div>
    </div>
</th:block>

<!--主页右侧信息栏-->
<div class="layui-col-md3" th:fragment="rightInfo(notice, ranks)">
    <div class="layui-card">
        <div class="layui-card-header myui-side-title">公告</div>
        <div class="layui-card-body" th:text="${notice}">
            欢迎访问kkblog开发社区，目前属于demo版本，欢迎注册留言
        </div>
    </div>

    <div class="layui-card myui-side-card">
        <div class="layui-card-header myui-side-title">积分排行</div>
        <div class="layui-card-body">
            <div class="layui-row" style="margin-bottom: 5px" th:each="u,stat:${ranks}">
                <div class="layui-col-md2" style="padding-top: 1%">
                    <img class="myui-avatar-small" style="margin: auto;display: block" th:onclick="|window.location.href='/user/' + ${u.id}|" th:src="@{${u.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                </div>
                <div class="layui-col-md7" style="text-align: left">
                    <a class="layui-row layui-font-14 myui-a-tag" th:href="@{'/user/' + ${u.id}}" th:text="${u.nickname}">秋天的落叶</a>
                    <div class="layui-row layui-font-12" style="color: #6c6c70"><span th:text="${u.dynamicNumber}">212</span> 帖子 • <span th:text="${u.commentNumber}">12</span> 评论</div>
                </div>
                <div class="layui-col-md3 layui-font-14" style="display: flex;padding-top: 2%;color: #6c6c70">
                    <i class="layui-icon layui-icon-dollar" style="font-size: 14px"></i>&nbsp;
                    <span th:text="${u.scores}">32212</span>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

<!--文章-->
<th:block th:fragment="articleList(articles, pageSize)">
    <div class="layui-card myui-card"  th:each="article,stat : ${articles}" style="padding: 12px 8px;display: flex;position: relative">
        <div style="display: block;width: 100%">
            <a class="layui-row layui-font-18 myui-article-title" th:href="@{'/article/' + ${article.id}}" th:text="${article.title}">如何选择合适软件开发语言-本增效和软件性能推荐G兼顾降本增效和软件性能推荐Go语言</a>
            <div th:text="${article.preview}" class="layui-row myui-font-color-gray" style="line-height: 24px!important;margin-top: 8px;cursor: pointer; display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;text-align: justify;text-overflow: ellipsis">
                当前入关你想找一家科技公司开发你的软件，您又不懂选择着那种开发语言合适你的项目，我们从ja
                va、C#、PHP过来的团队，建议您优选Go,Go 语言以其卓越的并发性能、快速的编译速度和丰富的标准库而在开发领域崭露头角。使用 Go 语言，可以构建出高性能
                、占用服务器资源小、可维护的网络应用，满足不断增长的互联网需求。所以选择Go来开发您的项目性价比是最高的，不仅仅在开发成本减少、
            </div>
            <div class="layui-row" style="margin-top: 10px;display: flex">
                <span style="font-weight: bold;color: #04a99a;cursor: pointer" th:text="${article.nickname}">dererrker</span>
                <span class="myui-font-color-gray layui-font-12">&nbsp;发布于&nbsp;</span>
                <span class="myui-font-color-gray layui-font-12" style="line-height: 18px" th:text="${#dates.format(article.createTime, 'yyyy-MM-dd HH:mm:ss')}">2023-23-12 12:12:12</span>
                <div style="margin-left: 5px;max-width: 70%;">
                    <span th:each="tag,stat : ${#thJson.parseStringArray(article.tags)}" th:text="${tag}" th:if="${stat.index < 3}" class="myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray">开撒但是是的武器大全源</span>
                    <!--                            <span class="myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray">开撒但是是的武器大全源</span>-->
                    <!--                            <span class="myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray">开撒但是是的武器大全源</span>-->
                </div>
            </div>
        </div>
        <div style="margin-left: 10px;width: 200px;height: 110px;display: flex;justify-content: center;align-items: center;position: relative;right: 0">
            <img style="max-width: 100%;max-height: 100%;object-fit: cover" th:src="@{${article.cover}}" th:if="${#strings.isEmpty(article.cover) == false}" src="https://file.mlog.club/images/2024/02/26/4f4bfcbe81542c5687dfcf1a2e3d39d6.png">
        </div>
    </div>
    <div class="layui-row" style="justify-content: center;display: flex" id="load-more-btn-area">
        <button th:classappend="${#lists.size(articles) < pageSize ? 'myui-hide' : ''}" id="load-more-btn" class="layui-btn layui-btn-xs">点击加载更多</button>
        <button th:classappend="${#lists.size(articles) >= pageSize ? 'myui-hide' : ''}" id="load-all" class="layui-btn layui-btn-xs layui-btn-primary">已经到底咯~</button>
    </div>
    <script th:inline="javascript">
        let articles = [[${articles}]];
        let pageSize = [[${pageSize}]];
        $(document).ready(function () {
            $('#load-more-btn').on('click', function () {
                let articleId = articles[articles.length - 1].id
                $.get('/index/article/loadMore?articleId=' + articleId , function(res) {
                    if (res.code === 200) {
                        articles = res.data;
                        let html = ""
                        for(let i = 0; i < res.data.length; i++) {
                            html += genArticleHtml(res.data[i])
                        }
                        $('#load-more-btn-area').before(html)
                        if (res.data.length < pageSize) {
                            $('#load-more-btn').addClass('myui-hide')
                            $('#load-all').removeClass('myui-hide')
                        }
                    } else {
                        layer.open({
                            title: '系统提示'
                            ,content: res.msg
                        });
                    }
                });
            })
        })

        let genArticleHtml = function (article) {
            let coverHtml = "";
            if (article.cover !== null && article.cover !== "") {
                coverHtml =
                    "        <div style='margin-left: 10px;width: 200px;height: 110px;display: flex;justify-content: center;align-items: center;position: relative;right: 0'>" +
                    "            <img style='max-width: 100%;max-height: 100%;object-fit: cover' src='" + article.cover + "'>" +
                    "        </div>";
            }
            let tagsHtml = "";
            if (article.tags !== '') {
                let tags = JSON.parse(article.tags);
                for (let i = 0; i < tags.length; i++) {
                    if (i > 2) {
                        break;
                    }
                    tagsHtml +=
                        "<span  class='myui-circled-word layui-font-12 myui-background-color-light-gray myui-font-color-gray'>" + tags[i] + "</span>";
                }
            }
            return "<div class='layui-card myui-card' style='padding: 12px 8px;display: flex;position: relative'>" +
                "        <div style='display: block;width: 100%'>" +
                "            <a class='layui-row layui-font-18 myui-article-title' href='/article/" + article.id + "'>" + article.title + "</a>" +
                "            <div class='layui-row myui-font-color-gray' style='line-height: 24px!important;margin-top: 8px;cursor: pointer; display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;text-align: justify;text-overflow: ellipsis'>" +
                article.preview +
                "            </div>" +
                "            <div class='layui-row' style='margin-top: 10px;display: flex'>" +
                "                <span style='font-weight: bold;color: #04a99a;cursor: pointer'>" + article.nickname + "</span>" +
                "                <span class='myui-font-color-gray layui-font-12'>&nbsp;发布于&nbsp;</span>" +
                "                <span class='myui-font-color-gray layui-font-12' style='line-height: 18px'>" + article.createTime + "</span>" +
                "                <div style='margin-left: 5px;max-width: 70%;'>" +
                tagsHtml +
                "                </div>" +
                "            </div>" +
                "        </div>" +
                coverHtml +
                "    </div>"
        }
    </script>
</th:block>

<!--用户粉丝、关注列表-->
<th:block th:fragment="userPageUserList(users, pageSize, type, userId)">
    <div th:each="user,stat : ${users}" class="layui-card myui-card layui-row" style="margin-top: 8px;padding: 5px;display: flex;position: relative">
        <div class="">
            <img class="myui-avatar-small" th:onclick="|window.location.href='/user/' + ${user.id}|" th:src="@{${user.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
        </div>
        <div class="" style="margin-left: 20px">
            <a class="layui-row myui-a-tag" th:href="@{${'/user/' + user.id}}" th:text="${user.nickname}">小可小可</a>
            <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden" th:text="${user.signature}">人很烂什么也没有留个人很烂什么也没</div>
        </div>
        <div class="" style="position: absolute; right: 30px">
            <div class="myui-subscribe-btn list" th:id="${'follow-btn-d-' + user.id}" th:onclick="|followUser('d-', ${user.id})|" th:classappend="${user.follow ? 'active' : ''}">
                <i class="layui-icon" th:id="${'follow-icon-d-' + user.id}" th:classappend="${user.follow ? '' : 'layui-icon-add-1'}" th:text="${user.follow ? '已关注' : '关注'}" style="color: white">已关注</i>
            </div>
        </div>
    </div>

    <div class="layui-row" style="justify-content: center;display: flex" id="load-more-btn-area">
        <button th:classappend="${#lists.size(users) < pageSize ? 'myui-hide' : ''}" id="load-more-btn" class="layui-btn layui-btn-xs">点击加载更多</button>
        <button th:classappend="${#lists.size(users) >= pageSize ? 'myui-hide' : ''}" id="load-all" class="layui-btn layui-btn-xs layui-btn-primary">已经到底咯~</button>
    </div>

    <script th:inline="javascript">
        let type = [[${type}]];
        let allUsers = [[${users}]];
        let userId = [[${userId}]];
        let pageSize1 = [[${pageSize}]];
        $(document).ready(function () {
            $('#load-more-btn').on('click', function () {
                let url;
                if (type === 'fan') {
                    url = '/user/moreFans?followerId=' + allUsers[allUsers.length - 1].id + '&userId=' + userId
                } else {
                    url = '/user/moreFollows?followedId=' + allUsers[allUsers.length - 1].id + '&userId=' + userId
                }
                $.get(url, function(res) {
                    if (res.code === 200) {
                        allUsers = res.data;
                        let html = ""
                        for(let i = 0; i < res.data.length; i++) {
                            html += genArticleHtml(res.data[i])
                        }
                        $('#load-more-btn-area').before(html)
                        if (res.data.length < pageSize1) {
                            $('#load-more-btn').addClass('myui-hide')
                            $('#load-all').removeClass('myui-hide')
                        }
                    } else {
                        layer.open({
                            title: '系统提示'
                            ,content: res.msg
                        });
                    }
                });
            })
        })

        let genArticleHtml = function (user) {
            let followHtml;
            if (user.follow) {
                followHtml =  "<div class='myui-subscribe-btn list active' id='follow-btn-d-" + user.id + "' onclick='followUser(\"d-\", " + user.id + "'>" +
                    "                <i class='layui-icon' id='follow-icon-d-" + user.id + "'  style='color: white'>已关注</i>" +
                    "          </div>";
            } else {
                followHtml =  "<div class='myui-subscribe-btn list' id='follow-btn-d-" + user.id + "' onclick='followUser(\"d-\", " + user.id + ")'>" +
                    "                <i class='layui-icon layui-icon-add-1' id='follow-icon-d-" + user.id + "'  style='color: white'>关注</i>" +
                    "          </div>";
            }
            return " <div class='layui-card myui-card layui-row' style='margin-top: 8px;padding: 5px;display: flex;position: relative'>" +
                "        <div class=''>" +
                "             <img class='myui-avatar-small' onclick='window.location.href=\"/user/" + user.id + "\"'  src='" + user.avatar + "'>" +
                "        </div>" +
                "        <div class='' style='margin-left: 20px'>" +
                "            <a class='layui-row myui-a-tag' href='/user/" + user.id + "'>" + user.nickname + "</a>" +
                "            <div class='layui-row layui-font-12' style='height: 18px;overflow-y: hidden'>" + user.signature + "</div>" +
                "        </div>" +
                "        <div class='' style='position: absolute; right: 30px'>" +
                followHtml +
                "        </div>" +
                "    </div>"
        }
    </script>
</th:block>

<!--页脚-->
<div class="layui-row" style="margin-top: 30px;margin-bottom: 20px;text-align: center;color: darkgrey" th:fragment="footer">
    © 2024 Powered by Derek
</div>

<!--用户主页头像区域-->
<th:block th:fragment="userPageHead(userDto)">
    <div class="layui-card myui-user-background" th:style="'background-image: url(' + @{${userDto.backgroundImage}} + ');'" style="background-image: url('https://file.mlog.club/images/2020/10/13/6e7933f5c9b2fe515210a17ea1762105.jpg');">
        <div class="layui-row myui-user-nickname-panel">
            <div class="layui-col-md6" style="margin-left: 130px;margin-top: 5px;width: 90%">
                <div class="layui-row myui-nickname layui-font-16" style="color: black" th:text="${userDto.nickname}">小可的猫爬架</div>
                <div class="layui-row" style="margin-top: 5px" th:text="${userDto.signature}">这个人很懒，什么也没有留下。   </div>
            </div>
        </div>
        <input type="file" class="myui-hide" accept="image/*" id="file-input">
        <div class="myui-change-bg-btn" th:if="${userDto.me}" id="file-input-btn">
            <i class="layui-icon layui-icon-set"></i> 更换背景图
        </div>
        <div style="position:absolute;right: 40px;bottom: 30px" class="myui-subscribe-btn" th:id="${'follow-btn-a-' + userDto.id}" th:onclick="|followUser('a-', ${userDto.id})|" th:classappend="${userDto.follow} ? 'active': ''" th:if="${!userDto.me}">
            <i class="layui-icon" th:id="${'follow-icon-a-' + userDto.id}" th:classappend="${userDto.follow} ? '': 'layui-icon-add-1'" th:text="${userDto.follow ? '已关注':'关注'}" style="color: white">关注</i>
        </div>
        <div class="layui-row myui-user-avatar-container" style="">
            <img class="myui-user-avatar" th:src="@{${userDto.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
        </div>
    </div>
    <script th:inline="javascript">
        $(document).ready(function () {
            $('#file-input-btn').on('click', function () {
                $('#file-input').click();
            })

            $('#file-input').on('change', function() {
                // 获取选中的文件列表
                let files = this.files;
                // 检查是否有文件被选中
                if (files.length > 0) {
                    let loading = layer.msg('正在上传', {icon: 16, shade: 0.3, time: 0});
                    let file = files[0];
                    // 获取文件大小（以字节为单位）
                    let fileSize = file.size;
                    if (fileSize > 1024 * 1024 * 5) {
                        layer.open({
                            title: '系统提示'
                            ,content: '图片最大为5MB！'
                        });
                        return;
                    }
                    // 上传图片
                    let formData = new FormData();
                    formData.append('image', file);
                    formData.append('name', file.name);
                    $.ajax({
                        url: '/image/changeBg', // 上传到服务器的 URL
                        type: 'POST',
                        data: formData,
                        contentType: false, // 不设置内容类型，让浏览器自动处理
                        processData: false, // 不处理发送的数据，因为 FormData 已经处理了
                        success: function(res) {
                            layer.close(loading);
                            // 请求成功时的回调函数
                            if (res.code !== 200) {
                                layer.open({
                                    title: '上传失败'
                                    ,content: res.msg
                                });
                            }
                            else {
                                window.location.reload();
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            // 请求失败时的回调函数
                            layer.close(loading);
                            console.error('Error:', textStatus, errorThrown);
                        }
                    });
                } else {
                    // 没有文件被选中
                    console.log('没有文件被选中');
                }
            });
        })
    </script>
</th:block>

<!--用户主页侧边信息-->
<th:block th:fragment="userPageSide(userDto)">
    <div class="layui-card" style="padding: 10px">
        <div class="layui-row">
            <span class="myui-nickname" style="color: black">个人成就</span>
        </div>
        <hr>
        <div class="layui-row">
            <div class="layui-col-md3 myui-layout-center">
                <div style="text-align: center">
                    <div class="myui-font-color-deep-gray layui-font-12">积分</div>
                    <span class="layui-font-14" style="font-weight: bold" th:text="${userDto.scores}">2213</span>
                </div>
            </div>
            <div class="layui-col-md3 myui-layout-center">
                <div style="text-align: center">
                    <div class="myui-font-color-deep-gray layui-font-12">话题</div>
                    <span class="layui-font-14" style="font-weight: bold" th:text="${userDto.dynamicNumber}">213</span>
                </div>
            </div>
            <div class="layui-col-md3 myui-layout-center">
                <div style="text-align: center">
                    <div class="myui-font-color-deep-gray layui-font-12">评论</div>
                    <span class="layui-font-14" style="font-weight: bold" th:text="${userDto.commentNumber}">0</span>
                </div>
            </div>
            <div class="layui-col-md3 myui-layout-center">
                <div style="text-align: center">
                    <div class="myui-font-color-deep-gray layui-font-12">排名</div>
                    <span class="layui-font-14" style="font-weight: bold" th:text="${userDto.registerRank}">1</span>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-card"  style="padding: 10px">
        <div class="layui-row">
            <span class="myui-nickname" style="color: black">个人资料</span>
            <a class="layui-font-14 myui-a-tag" style="float: right;margin-right: 10px" th:href="@{/profile/me}" th:if="${userDto.me}">编辑资料</a>
        </div>
        <hr>
        <div class="layui-row">
            <span>昵称</span>
            <span style="float: right;margin-right: 10px;width: 80%" th:text="${userDto.nickname}">小可小可小可小小可小可小可小小可小可小可小可小可</span>
        </div>
        <hr>
        <div class="layui-row">
            <span>签名</span>
            <span style="float: right;margin-right: 10px;width: 80%" th:text="${userDto.signature}">这个人很烂什么也没有留个人很烂什么也没有留个人很烂什么也没有留下</span>
        </div>
        <hr>
        <div class="layui-row">
            <span>友链</span>
            <a class="myui-a-tag" style="float: right;margin-right: 10px;width: 80%;overflow-x: hidden;" th:href="@{${userDto.link}}" target="_blank" th:text="${userDto.link}">小可小可小可小可小可</a>
        </div>
    </div>

    <div class="layui-card"  style="padding: 10px">
        <div class="layui-row">
            <span class="myui-nickname" style="color: black">粉丝</span>
            <span class="myui-font-color-deep-gray" style="font-weight: bold;margin-left: 5px" th:text="${userDto.fanNumber}">110</span>
            <a class="layui-font-14 myui-a-tag" style="float: right;margin-right: 10px;" th:href="@{'/user/' + ${userDto.id} + '/fans'}" th:if="${#lists.size(fans) < userDto.fanNumber}">更多</a>
        </div>
        <hr>
        <div class="layui-row">
            <div class="layui-row" style="margin-top: 8px" th:each="fan,stat:${fans}">
                <div class="layui-col-md2">
                    <img class="myui-avatar-small" th:onclick="|window.location.href='/user/' + ${fan.id}|" th:src="@{${fan.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                </div>
                <div class="layui-col-md6">
                    <a class="layui-row myui-a-tag" th:href="@{${'/user/' + fan.id}}" th:text="${fan.nickname}">小可小可</a>
                    <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden" th:text="${fan.signature}">人很烂什么也没有留个人很烂什么也没</div>
                </div>
                <div class="layui-col-md3">
                    <div class="myui-subscribe-btn list" th:id="${'follow-btn-b-' + fan.id}" th:onclick="|followUser('b-', ${fan.id})|" th:classappend="${fan.follow ? 'active' : ''}">
                        <i class="layui-icon" th:id="${'follow-icon-b-' + fan.id}" th:classappend="${fan.follow ? '' : 'layui-icon-add-1'}" style="color: white" th:text="${fan.follow ? '已关注' : '关注'}">关注</i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card"  style="padding: 10px">
        <div class="layui-row">
            <span class="myui-nickname" style="color: black">关注</span>
            <span class="myui-font-color-deep-gray" style="font-weight: bold;margin-left: 5px" th:text="${userDto.followNumber}">110</span>
            <a class="layui-font-14 myui-a-tag" style="float: right;margin-right: 10px;" th:href="@{'/user/' + ${userDto.id} + '/follows'}" th:if="${#lists.size(follows) < userDto.followNumber}">更多</a>
        </div>
        <hr>
        <div class="layui-row">
            <div class="layui-row" style="margin-top: 8px" th:each="follow,stat:${follows}">
                <div class="layui-col-md2">
                    <img class="myui-avatar-small" th:onclick="|window.location.href='/user/' + ${follow.id}|" th:src="@{${follow.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                </div>
                <div class="layui-col-md6">
                    <a class="layui-row myui-a-tag" th:href="@{${'/user/' + follow.id}}" th:text="${follow.nickname}">小可小可</a>
                    <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden" th:text="${follow.signature}">人很烂什么也没有留个人很烂什么也没</div>
                </div>
                <div class="layui-col-md3">
                    <div class="myui-subscribe-btn list" th:id="${'follow-btn-c-' + follow.id}" th:onclick="|followUser('c-', ${follow.id})|" th:classappend="${follow.follow ? 'active' : ''}">
                        <i class="layui-icon" th:id="${'follow-icon-c-' + follow.id}" th:classappend="${follow.follow ? '' : 'layui-icon-add-1'}" th:text="${follow.follow ? '已关注' : '关注'}" style="color: white">已关注</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        let loginUser = [[${user}]]
        let followUser = function (prefix, id) {
            if (loginUser == null) {
                layer.open({
                    title: '系统提示'
                    ,content: '请登陆后再操作'
                });
                return;
            }
            if($('#follow-btn-' + prefix + id).hasClass('active')) {
                // 取消关注
                $.get('/follow/undoFollow?userId=' + id, function(res) {
                    if (res.code === 200){
                        layer.msg('取消关注成功！', {icon: 1}, function(){});
                        $('#follow-btn-' + prefix + id).removeClass('active');
                        $('#follow-icon-' + prefix + id).addClass('layui-icon-add-1').text('关注');
                        // $('#follow-icon-' + id).text('已关注');
                    } else {
                        layer.open({
                            title: '系统提示'
                            ,content: res.msg
                        });
                    }
                });
            }
            else {
                $.get('/follow/doFollow?userId=' + id, function(res) {
                    if (res.code === 200){
                        layer.msg('关注成功！', {icon: 1}, function(){});
                        $('#follow-btn-' + prefix + id).addClass('active');
                        $('#follow-icon-' + prefix + id).removeClass('layui-icon-add-1').text('已关注');
                        // $('#follow-icon-' + id).text('已关注');
                    } else {
                        layer.open({
                            title: '系统提示'
                            ,content: res.msg
                        });
                    }
                });
            }
        }

    </script>
</th:block>
<!--滑动到顶部组件-->
<div th:fragment="goToTop">
    <button style="border-radius: 5px;position: fixed; right: 1px;bottom: 30px;" class="layui-btn layui-anim" id="go-to-top-btn">
        回到顶部
    </button>
    <script>
        $('#go-to-top-btn').on('click', function () {
            window.scrollTo({
                top: 0,
                left: 0,
                behavior: 'smooth' // 可选，平滑滚动效果
            });
        })
        window.addEventListener('scroll', function () {
            if(window.scrollY  === 0) {
                $('#go-to-top-btn').addClass('myui-hide')
                $('#go-to-top-btn').remove('layui-anim-up')
                $('#go-to-top-btn').addClass('layui-anim-fadeout')
            } else if (window.scrollY > 300) {
                $('#go-to-top-btn').removeClass('myui-hide')
                $('#go-to-top-btn').removeClass('layui-anim-fadeout')
                $('#go-to-top-btn').addClass('layui-anim-up')
            }
        })
    </script>
</div>

<!--签到打卡-->
<div class="layui-card" th:fragment="checkPanel(dailyCheck, checkUsers, user)">
    <div class="layui-card-header myui-side-title">签到</div>
    <div class="layui-card-body">
        <div class="layui-row myui-font-color-deep-gray">
            <div class="layui-col-md2">
                <i class="layui-icon layui-icon-dollar layui-font-16"></i>
            </div>
            <div class="layui-col-md5" id="checkScores" th:text="${dailyCheck == null ? 0 : dailyCheck.scores}">0</div>
            <div class="layui-col-md5">
                <div class="layui-btn layui-btn-xs" th:classappend="${dailyCheck == null ? '' : 'layui-btn-disabled'}" id="checkBtn" style="width: 100%">
                    <i class="layui-icon layui-icon-date"></i>
                    <span th:text="${dailyCheck == null ? '签到' : '今日已签到'}"></span>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-top: 15px; text-align: center;" th:if="${!#strings.isEmpty(dailyCheck)}">
            <div class="myui-font-color-deep-gray" style="margin-left: auto;margin-right: auto;background-color: #f6f5f5;border-radius: 5px;padding: 3px 0">
                <i class="layui-icon layui-icon-fire layui-font-16"></i>
                你已经连续签到
                <span style="color: #0badef;font-weight: bold" id="checkDays" th:text="${dailyCheck == null ? 0 : dailyCheck.days}">1</span>
                天啦！
            </div>
        </div>
    </div>
    <hr>
    <div class="layui-card-header myui-side-title layui-font-14">今日排行</div>
    <div class="layui-card-body">
        <div class="layui-row" style="margin-bottom: 5px" th:each="checkUser,stat:${checkUsers}">
            <div class="layui-col-md2" style="padding-top: 1%;display: flex;justify-content: center;align-items: center;width: 45px;height: 45px">
                <img class="myui-avatar-mini" style="margin: auto;display: block" th:onclick="|window.location.href='/user/' + ${checkUser.id}|" th:src="@{${checkUser.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
            </div>
            <div class="layui-col-md7" style="text-align: left">
                <a class="layui-row layui-font-12 myui-a-tag" th:href="@{'/user/' + ${checkUser.id}}" th:text="${checkUser.nickname}">秋天的落叶</a>
                <div class="layui-row layui-font-12" style="color: #6c6c70;font-size: 11px!important;">
                    @
                    <span th:text="${#thJson.parseTimeDescription(checkUser.checkTime)}">刚刚</span>
                </div>
            </div>
            <hr>
        </div>
    </div>
    <script th:inline="javascript">
        let loginUser1 = [[${user}]];
        $(document).ready(function () {
            // 签到
            $('#checkBtn').on('click', function () {
                if (loginUser1 == null || loginUser1 === undefined) {
                    window.location.href = '/login'
                }
                if ($('#checkBtn').hasClass('layui-btn-disabled')) {
                    return;
                }
                $.get('/check/doCheck', function(res) {
                    if (res.code === 200) {
                        window.location.reload();
                    } else {
                        layer.open({
                            title: '系统提示'
                            ,content: res.msg
                        });
                    }
                });
            })
        })
    </script>
</div>
</body>
</html>